<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>cloud</title>
		<style type="text/css">
			body{
				background: url(img/main_bg.png);
				background-color: #081621;
				margin: 0;
				padding: 0;
			}
			.cloud_img {
				position: absolute;
				overflow: hidden;
				left: 0;
				right: 0;
				top: 0;
				bottom:113px;
			}
			.cloud_img >img{
				position: absolute;
				width: 100%;
			}
			.r4{
				top: -30%;;
    			right: -10%;
    			animation:ani_r4 1s ease-out forwards;
			}
			.l4{
				top: -22%;
                left: -150%;
				width: 120% !important;
				animation:ani_l4 1s ease-out 0.5s forwards;
			}
			.l3{
				top: 2%;
    			left: -20%;
    			animation:ani_l3 1s ease-out forwards;
			}
			.r3{
				top: 3%;
    			right: -34%;
    			width: 91% !important;
    			animation:ani_r3 1s ease-out forwards;
			}
			.r2{
				right: -46%;
    			top: 25%;
    			animation:ani_r2 1s ease-out forwards;
			}
			.l2{
				top: 24%;
    			left: -22%;
    			animation:ani_l2 1s ease-out forwards;
			}
			img.r1 {
    			top: 45%;
    			right: -36%;
    			animation:ani_r1 1s ease-out forwards;
			}
			img.l1{
				top: 43%;
   				left: -44%;
   				animation:ani_l1 1s ease-out forwards;
			}
			.text{
				position: absolute;
				width: 100%;
				top: 50%;
				margin-top: -32px;
				text-align: center;
			}
			.text >p{
				margin: 0;
			}
			.text p:first-child{
				font-size: 28px;
			}
			.text p:last-child{
				font-weight: 700;
				color: #777;
			}
			.bottom_area{
				position: absolute;
				bottom: 0;
				height: 113px;
				width: 100%;
				background: url(img/bottom_bg1.jpg);
			}
			/*.bottom_area{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 113px;
				background:url(../img/bottom_bg1.jpg);
				text-align: center;
				line-height: 113px;
			}*/
			.bottom_area img{
				position: absolute;
			    top: -24px;
			    left: 50%;
			    margin-left: -224px;
			}
			.bottom_bg2{
				position: absolute;
				height: 100%;
				width: 100%;
				background: url(img/bottom_bg2.png) no-repeat;
			}
			@keyframes ani_r4{
			    0%{right: -100%;}
			    100%{right: -10%;}
			}
			@keyframes ani_l4{
			    0%{left: -100%;}
			    100%{left: -10%;}
			}
			@keyframes ani_l3{
			    0%{left: -100%;}
			    100%{left: -20%;}
			}
			@keyframes ani_r3{
			    0%{right: -100%;}
			    100%{right: -34%;}
			}
			@keyframes ani_r2{
			    0%{right: -100%;}
			    100%{right: -46%;}
			}
			@keyframes ani_l2{
			    0%{left: -100%;}
			    100%{left: -22%;}
			}
			@keyframes ani_r1{
			    0%{right: -100%;}
			    100%{right: -36%;}
			}
			@keyframes ani_l1{
			    0%{left: -100%;}
			    100%{left: -44%;}
			}
		</style>
	</head>
	<body>
		<div class="cloud_img">
			<img class="r4" src="img/yun_left/L3.png"/>
			<img class="l4" src="img/yun_left/L4.png"/>
			<img class="l3" src="img/yun_left/L3.png"/>
			<img class="r3" src="img/yun_right/3.png"/>
			<img class="r2" src="img/yun_right/2.png"/>
			<img class="l2" src="img/yun_left/L2.png"/>
			<img class="r1" src="img/yun_right/1.png"/>
			<img class="l1" src="img/yun_left/L1.png"/>
			<div class="text">
				<!--<p>即将蜕变</p>
				<p>About to Change</p>-->
				<img src="img/change_cn.png"/>
				<br>
				<img src="img/change_en.png"/>
			</div>
		</div>
		<div class="bottom_area">
			<div class="bottom_bg2"></div>
			<a href="http://www.biaoqing.com"><img src="img2/old_page.png"/></a>
		</div>
	</body>
</html>
